<template>
    <div class="player">
        <div :class="['footer-hidebox',!showFooter?'show':'hide']">
            <span class="icon-show-right" @click="footerPlayerToggle"></span>
        </div>
        <div :class="['footer-player',showFooter?'show':'hide']">
            <span class="icon-hide-right" @click="footerPlayerToggle"></span>
            <div :class="['songimg',{'rotate':isPlayed,'imgpause':paused}]">
                <img :src="[!isEmptyPlaySong?imgUrl1+playSong.imgmid+imgUrl2:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530192368118&di=06acfd1ca30a916c9a572253347b9396&imgtype=0&src=http%3A%2F%2Fcdn1.freepik.com%2Fimage%2Fth%2F318-59810.jpg']" alt="">
            </div>
            <div class="songinfo" v-if="!isEmptyPlaySong">
                <p class="songname" :title="playSong.songname">{{playSong.songname}}</p>
                <p class="singer">{{playSong.singer}}</p>
                <p class="time">{{curTime}}/{{sumTime}}</p>
            </div>
            
            <div class="play-control">
                <div class="playmodesuggestion">
                    <span class="playmodesuggestion-order" v-show="modeType==='order'">顺序播放</span>
                    <span class="playmodesuggestion-replay" v-show="modeType==='replay'">单曲循环</span>
                    <span class="playmodesuggestion-random" v-show="modeType==='random'">随机播放</span>
                </div>
                <span class="playmode" @click="togglePlayMode" :class="[modeType==='order'?'icon-playlist-play':'',modeType==='replay'?'icon-replay-1':'',modeType==='random'?'icon-random':'']"></span>    
                <span :class="['playpause',isPlayed && !paused?'icon-music_pause_button':'icon-music_play_button']"  @click="togglePlayPause"></span>
                <span class="icon-Music-Playlist" @click='toggleShowPlayList'></span>
            </div>
        </div>
        <playlist></playlist>
        <div class="audio">
            <audio :src="audioSrc"  ref="audio" @canplay="canplay" @ended="ended"></audio>
        </div>
    </div>
</template>

<script>
import {mapState,mapGetters} from "vuex"
import playlist from '../playlist/playlist'
import Storage from '../../storage/storage.js'
export default {
    data(){
        return{
            songCurTime:0,
            songSumTime:0,
            imgUrl1:'https://y.gtimg.cn/music/photo_new/T002R90x90M000',
            imgUrl2:'.jpg?max_age=2592000',
        }
    },
    methods:{
        togglePlayMode(){
            $('audio').removeAttr('loop');
            if(this.modeType==='order'){
                this.$store.commit('setModeType','random');
                return;
            }
            if(this.modeType==='random'){
                this.$store.commit('setModeType','replay');
                $('audio').attr('loop','loop');
                return;
            }
            if(this.modeType==='replay'){
                this.$store.commit('setModeType','order');
                return;
            }
        },
        toggleShowPlayList(){
            this.$store.commit('setShowPlayList',!this.showPlayList);
            this.$store.commit('setShowFooter',!this.showFooter);
        },
        togglePlayPause(){
            this.$store.commit('setPaused');
        },
        footerPlayerToggle(){
            this.$store.commit('setShowFooter',!this.$store.state.showFooter);
        },
        canplay(){
            const audio=this.$refs.audio;
            if(audio.readyState === 4){
                audio.play();
                this.$store.commit('setAudio',audio);
                setInterval(()=>{
                    this.songCurTime=Math.ceil(audio.currentTime);
                    this.songSumTime=Math.ceil(audio.duration);
                },1000)           
                this.$store.commit('setIsPlayed',true);
            }
        },
        ended(){
            const audio=this.$refs.audio;
            let curPlayIndex = this.curPlayIndex;
            if(this.modeType==='order'){
                if(this.listTotal===1){
                    this.$store.commit('setPaused');
                    return;
                }
                curPlayIndex++;
                if(curPlayIndex>=this.listTotal){
                    curPlayIndex=0;
                }
                this.$store.commit("setCurPlayIndex", curPlayIndex);
                this.$store.commit('setPlaySong',this.playList[curPlayIndex]);
            }else if(this.modeType==='random'){
                if(this.listTotal===1){
                    this.$store.commit('setPaused');
                    return;
                }
                curPlayIndex=Math.floor(Math.random()*this.listTotal);
                while(curPlayIndex===this.curPlayIndex){
                    curPlayIndex=Math.floor(Math.random()*this.listTotal);
                }
                this.$store.commit("setCurPlayIndex", curPlayIndex);
                this.$store.commit('setPlaySong',this.playList[curPlayIndex]);
            }
        },
        isEmptyObject(obj){
            for(let key in obj){
                return false;
            };
            return true;
        },
        
    },
    computed:{
        ...mapState([
            'playSong',
            'playList',
            'curPlayIndex',
            'showFooter',
            'showDatail',
            'audio',
            'isPlayed',
            'paused', 
            'showPlayList',
            'modeType',
        ]),
        ...mapGetters([
            'audioSrc',
            'listTotal',
        ]),
        isEmptyPlaySong(){
            return this.isEmptyObject(this.playSong);
        },
        curTime(){
            if(!this.songCurTime){
                return '00:00'
            }
            let min=Math.floor(this.songCurTime/60);
            if(min<10){
                min='0'+min;
            }
            let sec=this.songCurTime%60;
            if(sec<10){
                sec='0'+sec;
            }
            return min+':'+sec
        },
        sumTime(){
            if(!this.songSumTime){
                return '00:00'
            }
            let min=Math.floor(this.songSumTime/60);
            if(min<10){
                min='0'+min;
            }
            let sec=this.songSumTime%60;
            if(sec<10){
                sec='0'+sec;
            }
            return min+':'+sec
        }
        
    },
    components:{
        playlist
    },
    watch:{
        playSong:{
            handler(){
                Storage.save('playSong',this.playSong)
            },
            deep:true
        },
        playList:{
            handler(){
                Storage.save('playList',this.playList)
            },
            deep:true
        },
        curPlayIndex:{
            handler(){
                Storage.save('curPlayIndex',this.curPlayIndex)
            },
            deep:true
        }
    }
}
</script>

<style scoped>
div.show{
    display: block;
}
div.hide{
    display: none;
}
.footer-hidebox{
    position: fixed;
    font-size: 40px;
    right: 0;
    bottom: 58px;
    background: rgba(0, 0, 0, 0.5);
    color:#fff;
    cursor: pointer;
}
.icon-hide-right{
    position: absolute;
    color: #fff;
    font-size: 30px;
    right: 0;
    margin: 5px 10px;
    z-index: 100;
    cursor: pointer;
}
.footer-player{
    position: fixed;
    bottom: 10px;
    background:rgba(0,0,0,0.5);
    height: 100px;
    width: 100%;
}
.rotate{
    animation: imgrotate 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.imgpause{
   animation-play-state:paused;
}
.songimg{
    display: inline-block;
    margin: 5px;
}
.songimg img{
    border-radius: 50%;
    width: 90px;
    height: 90px;
}
.songinfo{
    display: inline-block;
    top: 0;
    position: absolute;
    margin: 10px 0 0 10px;
    max-width: 100px;
}
.songname{
    color: #fff;
    max-width: 100px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.singer{
    color: #ccc;
    max-width: 100px;
    font-size: 13px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.time{
    color: #fff;
}
.play-control{
    display: inline-block;
    position: absolute;
    color: #fff;
    right: 0;
    padding: 40px 10px 0 10px;
    font-size: 42px;
}
.playmodesuggestion span{
    position: absolute;
    font-size: 14px;
    top: 10px;
}
.play-control>span{
    cursor: pointer;
}
@keyframes imgrotate{
    0%{transform: rotate(0deg);}
    100%{transform:rotate(360deg)}
}
</style>

